<template>
	<div class="layeredPanel">
		<template v-if="groupArrangement.length>0">
			<div class="scrollBox" :style="{minWidth:widthScroll()}">
				<el-table style="width: 100%" :header-cell-style="{background:'#f2f8ff'}" empty-text="未知">
					<el-table-column
						align="center"
						:width="_in==enter.byFields.length-1?lastWidth:widthGroup"
						v-for="(_i,_in) in  enter.byFields"
						:key="_i.id"
						:label="_i.propertyName"
						:prop="_i.id"
					>
						<template slot="header">
							<groupChoose
								@change="groupChange($event,_in)"
								:name="_i.propertyName"
								:optionsArr="arrGroupOptions[_in].options"
								:checkedArr="arrGroupOptions[_in].checked"
							></groupChoose>
						</template>

					</el-table-column>

					<el-table-column
						align="center"
						:min-width="widthIndex"
						v-for="(_i,_in) in  enter.messures"
						:key="_i.eventId"
						:prop="_i.eventId"
					>
						<template slot="header">
              <span class="table_head">
                <span class="icon">{{convert(_in+1)}}</span>
                {{_i.name}}
              </span>
						</template>
					</el-table-column>
				</el-table>
				<treeTable
					:key="updateBool"
					:widthGroup="widthGroup"
					:widthIndex="widthIndex"
					:groupArrangement="groupArrangement"
					:lastWidth="lastWidth"
				></treeTable>
			</div>
		</template>
	</div>
</template>
<script>
	import treeTable from "./treeTable.vue";
	import groupChoose from "./groupChoose.vue"; // 引入分组筛选选择组件
	export default {
		name: "layeredPanel",
		props: {
			enter: {
				type: Object,
				default: () => {
					return {};
				}
			},
			lastWidth: {
				type: Number,
				default: () => {
					return 260;
				}
			},
			out: {
				type: Object,
				default: () => {
					return {};
				}
			},
			currentPage: {
				type: Number,
				default: () => {
					return 1;
				}
			},
			pageSize: {
				type: Number,
				default: () => {
					return 5;
				}
			},
			dateScreen: {
				type: Object,
				default: () => {
					return null;
				}
			},
			widthGroup: {
				type: Number,
				default: () => {
					return 200;
				}
			},
			widthIndex: {
				type: Number,
				default: () => {
					return 200;
				}
			}
		},
		components: { treeTable,groupChoose },
		data() {
			return {
				updateBool:0,
				arrGroupOptions: [], // 分组可选值数组
				groupArrangement: [] // 转义后的具有层次的数据结构
			};
		},
		watch: {},
		methods: {
			groupChange(arr, index) {
				// console.log(this.arrGroupOptions,arr,index)
				this.arrGroupOptions[index].checked = JSON.parse(JSON.stringify(arr));
				this.getArrangement(this.arrGroupOptions);
				this.updateBool++;
			},
			convert(num) {
				return num <= 26
					? String.fromCharCode(num + 64)
					: this.convert(~~((num - 1) / 26)) + this.convert(num % 26 || 26);
			},
			// 数据过滤函数  根据 日期  空数据 进行数据筛选
			dataFilter(arr, str = "") {
				let len = arr.length - 1;

				for (let i = 0; i <= len; i++) {
					let _str = str + arr[i].value;

					let bool = false;

					// let pageArr = this.pageHandle(this.out[0].rollUpResult.rows,this.currentPage,this.pageSize);
					this.out[0].rollUpResult.rows.map(_i => {
						if (_i.byValues.join("").indexOf(_str) != -1) {
							bool = true;
						}
					});

					if (!bool) {
						arr.splice(i, 1);
						len--;
						i--;
						continue;
					} else {
						arr[i].children = this.dataFilter(arr[i].children, _str);
					}
				}
				return arr;
			},
			widthScroll() {
				let num = 0;

				for (let i = 0; i <= this.enter.byFields.length - 2; i++) {
					num += Number(this.widthGroup);
				}

				num += this.lastWidth;

				for (let i = 0; i <= this.enter.messures.length - 1; i++) {
					num += Number(this.widthIndex);
				}

				return num + "px";
			},
			zeroDel(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				let mon = date.getMonth() + 1;
				let day = date.getDate();
				mon = mon < 10 ? "0" + mon : mon;
				day = day < 10 ? "0" + day : day;
				return year + "-" + mon + "-" + day;
			},
			// 获取分组可选值函数
			getArrGroup(enter, out) {
				let _arr = JSON.parse(JSON.stringify(enter.byFields));
				_arr.map(_i => {
					_i.options = [];
				});
				out.map(item => {
					item.detailResult.rows.map(itemRow => {
						itemRow.byValues.map((itemByv, indexByv) => {
							if(_arr[indexByv]){
								_arr[indexByv].options.push(itemByv);
							}
						});
					});
				});
				_arr.map(item => {
					item.options = Array.from(new Set(item.options));
					item.checked = Array.from(new Set(item.options));
				});
				return _arr;
			},
			// 分页函数
			pageHandle(arr, currentPage, pageSize) {
				let _arr = [];
				currentPage = Number(currentPage);
				pageSize = Number(pageSize);
				for (
					let i = (currentPage - 1) * pageSize;
					i <= (currentPage - 1) * pageSize + pageSize - 1;
					i++
				) {
					if (arr[i]) {
						_arr.push(JSON.parse(JSON.stringify(arr[i])));
					}
				}

				return _arr;
			},
			// 根据分组可选值，生成具有层次的对象结构
			getArrangement(arr) {
				let copy = [];
				let len = arr.length;

				let that = this;

				// 结构转义函数
				function childrenAdd(arr, chlArr, index) {
					let _arr = JSON.parse(JSON.stringify(arr));
					if (_arr.length == 0) {
						chlArr.map(_i => {
							let obj = {
								value: _i,
								children: []
							};
							if (index == len - 1) {
								obj.bool = true;
							}
							_arr.push(obj);
						});
					} else {
						_arr.map(_i => {
							_i.children = childrenAdd(_i.children, chlArr, index);
						});
					}
					return _arr;
				}

				// 表格数据补全函数
				function dataAdd(arr, group = []) {
					let _arr = JSON.parse(JSON.stringify(arr));
					let _group = JSON.parse(JSON.stringify(group));
					_arr.map(item => {
						if (!item.bool && item.children && item.children.length > 0) {
							item.children = dataAdd(item.children, [..._group, item.value]);
						} else {
							item.dataTable = {
								indexArrTotal: [], // 外侧指标总计数组
								indexArrDate: [] // 内侧指标，每天数据
							};
							let str = _group.join("") + item.value;
							// 外侧指标总计值 列追加
							that.enter.messures.map((itemMess, indexMess) => {
								let obj = {
									one: null,
									two: null
								};
								that.out.map((itemOut, indexOut) => {
									itemOut.rollUpResult.rows.map(itemRow => {
										if (itemRow.byValues.join("") == str && indexOut == 0) {
											obj.one = itemRow.values[0][indexMess];
										}
										if (itemRow.byValues.join("") == str && indexOut == 1) {
											obj.two = itemRow.values[0][indexMess];
										}
									});
								});
								item.dataTable.indexArrTotal.push(obj);
							});
							// 内侧折叠表格,数据追加  -- 时间维度
							that.out[0].detailResult.series.map((itemSer, indexSer) => {
								if (that.dateScreen && that.zeroDel(that.dateScreen) != itemSer) {
									return;
								}
								let numDate = {
									time: null,
									indexArr: []
								};
								// 时间列追加
								let time = {
									one: itemSer,
									two: null
								};
								if (that.out[1]) {
									time.two = that.out[1].detailResult.series[indexSer];
								}
								numDate.time = time;
								// 指标列追加
								that.enter.messures.map((itemMess, indexMess) => {
									let objMess = {
										one: null,
										two: null
									};
									that.out.map((itemOut, indexOut) => {
										itemOut.detailResult.rows.map(itemRow => {
											if (itemRow.byValues.join("") == str && indexOut == 0) {
												objMess.one = itemRow.values[indexSer][indexMess];
											}
											if (itemRow.byValues.join("") == str && indexOut == 1) {
												objMess.two = itemRow.values[indexSer][indexMess];
											}
										});
									});
									numDate.indexArr.push(objMess);
								});
								item.dataTable.indexArrDate.push(numDate);
							});
						}
					});

					return _arr;
				}

				for (let i = 0; i <= len - 1; i++) {
					copy = childrenAdd(copy, arr[i].checked, i);
				}
				copy = dataAdd(copy); // 根据传入日期，进行数据追加
				copy = that.dataFilter(copy); // 进行数据过滤，对空分组，进行剔除
				copy = that.pageHandle(copy,this.currentPage,this.pageSize);
				this.groupArrangement = copy;
			}
		},
		beforeCreate() {},
		created() {
			this.arrGroupOptions = this.getArrGroup(this.enter, this.out);
			this.getArrangement(this.arrGroupOptions);
		},
		beforeMount() {},
		mounted() {},
		computed: {}
	};
</script>

<style scoped lang="scss">
	.layeredPanel {
		border-left: 1px solid #e4e7ed;
		border-right: 1px solid #e4e7ed;
		border-bottom: 1px solid #e4e7ed;
		overflow-x: scroll;
		// overflow-x: hidden;
		overflow-y: hidden;
		.scrollBox {
			height: 100%;
		}
	}
	.table_head {
		.icon {
			background: #00bf8a;
			color: white;
			display: inline-block;
			text-align: center;
			line-height: 0.3rem;
			width: 0.3rem;
			cursor: pointer;
			height: 0.3rem;
			border-radius: 50%;
			margin: 0 0.1rem;
		}
	}
</style>
